<template>
  <div class="analysis-page">
    <!-- 顶部数据概览 -->
    <div class="top-metrics">
      <el-row :gutter="24">
        <el-col :span="6" v-for="(metric, index) in topMetrics" :key="index">
          <el-card class="metric-card" :class="`metric-card-${index + 1}`" @click="handleMetricClick(metric)">
            <div class="metric-content">
              <div class="metric-left">
                <div class="metric-icon" :style="{ background: metric.gradient }">
                  <el-icon :size="28" :color="metric.iconColor">
                    <component :is="metric.icon" />
                  </el-icon>
                </div>
              </div>
              <div class="metric-right">
                <div class="metric-value" :data-value="metric.value">
                  {{ animatedMetrics[index] }}
                </div>
                <div class="metric-label">{{ metric.label }}</div>
                <div class="metric-trend" :class="metric.trend.type">
                  <el-icon size="12">
                    <component :is="metric.trend.type === 'positive' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  {{ metric.trend.value }}
                  <span class="trend-period">vs 上周</span>
                </div>
              </div>
            </div>
            <div class="metric-progress">
              <div class="progress-bar" :style="{ width: metric.progress + '%', background: metric.color }"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据分析图表区域 -->
    <el-row :gutter="24" class="chart-section">
      <!-- 左侧主图表 -->
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <div class="header-left">
                <h3 class="chart-title">数据趋势分析</h3>
                <p class="chart-subtitle">多维度数据对比</p>
              </div>
              <div class="header-right">
                <el-button-group class="period-buttons">
                  <el-button 
                    v-for="period in timePeriods" 
                    :key="period.value"
                    :type="selectedPeriod === period.value ? 'primary' : ''"
                    size="small"
                    @click="changePeriod(period.value)"
                  >
                    {{ period.label }}
                  </el-button>
                </el-button-group>
                <el-dropdown trigger="click" @command="handleExport">
                  <el-button size="small" :icon="MoreFilled" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="png">导出为PNG</el-dropdown-item>
                      <el-dropdown-item command="pdf">导出为PDF</el-dropdown-item>
                      <el-dropdown-item command="excel">导出数据</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>
          <div class="main-chart-container">
            <v-chart 
              class="main-chart" 
              :option="mainChartOption" 
              autoresize
              @click="handleChartClick"
            />
          </div>
        </el-card>
      </el-col>

      <!-- 右侧辅助图表 -->
      <el-col :span="8">
        <el-card class="pie-chart-card">
          <template #header>
            <div class="chart-header">
              <h3 class="chart-title">数据分布</h3>
              <el-button size="small" :icon="Refresh" @click="refreshPieData" circle />
            </div>
          </template>
          <div class="pie-chart-container">
            <v-chart 
              class="pie-chart" 
              :option="pieChartOption" 
              autoresize
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据分析 -->
    <el-row :gutter="24" class="detail-section">
      <!-- 数据表格 -->
      <el-col :span="12">
        <el-card class="table-card">
          <template #header>
            <div class="table-header">
              <h3 class="table-title">数据明细</h3>
              <div class="table-actions">
                <el-input
                  v-model="searchText"
                  placeholder="搜索数据..."
                  size="small"
                  style="width: 200px;"
                  :prefix-icon="Search"
                  clearable
                />
                <el-button size="small" :icon="Download" @click="exportData">导出</el-button>
              </div>
            </div>
          </template>
          <div class="table-container">
            <el-table
              :data="filteredTableData"
              style="width: 100%"
              size="small"
              stripe
              @row-click="handleRowClick"
            >
              <el-table-column prop="date" label="日期" width="100" />
              <el-table-column prop="category" label="类别" width="80" />
              <el-table-column prop="value" label="数值" width="80" align="right">
                <template #default="{ row }">
                  <span class="value-cell">{{ row.value.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="growth" label="增长率" width="80" align="right">
                <template #default="{ row }">
                  <span class="growth-cell" :class="row.growth >= 0 ? 'positive' : 'negative'">
                    {{ row.growth >= 0 ? '+' : '' }}{{ row.growth }}%
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <!-- 实时监控 -->
      <el-col :span="12">
        <el-card class="monitor-card">
          <template #header>
            <div class="monitor-header">
              <h3 class="monitor-title">实时监控</h3>
              <el-tag type="success" size="small">
                <el-icon size="12"><VideoPlay /></el-icon>
                实时更新
              </el-tag>
            </div>
          </template>
          <div class="monitor-content">
            <!-- 实时指标 -->
            <div class="realtime-metrics">
              <div v-for="item in realtimeData" :key="item.name" class="realtime-item">
                <div class="realtime-label">{{ item.name }}</div>
                <div class="realtime-value">{{ item.value }}</div>
                <div class="realtime-chart">
                  <div class="mini-chart">
                    <div 
                      v-for="(point, i) in item.history" 
                      :key="i"
                      class="chart-bar"
                      :style="{ 
                        height: point + '%', 
                        background: item.color,
                        animationDelay: i * 50 + 'ms'
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 系统状态 -->
            <div class="system-status">
              <h4 class="status-title">系统状态</h4>
              <div class="status-items">
                <div v-for="status in systemStatus" :key="status.name" class="status-item">
                  <div class="status-info">
                    <span class="status-name">{{ status.name }}</span>
                    <span class="status-value">{{ status.value }}%</span>
                  </div>
                  <div class="status-bar">
                    <div 
                      class="status-fill" 
                      :style="{ 
                        width: status.value + '%', 
                        background: getStatusColor(status.value) 
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据洞察 -->
    <el-row :gutter="24" class="insights-section">
      <el-col :span="24">
        <el-card class="insights-card">
          <template #header>
            <div class="insights-header">
              <h3 class="insights-title">智能洞察</h3>
              <el-button size="small" :icon="MagicStick" type="primary">
                生成报告
              </el-button>
            </div>
          </template>
          <div class="insights-content">
            <el-row :gutter="16">
              <el-col :span="8" v-for="insight in insights" :key="insight.id">
                <div class="insight-item" :class="insight.type">
                  <div class="insight-icon">
                    <el-icon :size="20">
                      <component :is="insight.icon" />
                    </el-icon>
                  </div>
                  <div class="insight-content-text">
                    <h4 class="insight-title">{{ insight.title }}</h4>
                    <p class="insight-description">{{ insight.description }}</p>
                    <div class="insight-action">
                      <el-button size="small" text @click="handleInsightAction(insight)">
                        查看详情
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  ToolboxComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  TrendCharts,
  PieChart as PieChartIcon,
  DataAnalysis,
  Timer,
  ArrowUp,
  ArrowDown,
  MoreFilled,
  Refresh,
  Search,
  Download,
  VideoPlay,
  MagicStick,
  TrophyBase,
  Warning,
  SuccessFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  ToolboxComponent
])

// 响应式数据
const selectedPeriod = ref('7d')
const searchText = ref('')
const animatedMetrics = ref([0, 0, 0, 0])

// 时间周期选项
const timePeriods = [
  { label: '7天', value: '7d' },
  { label: '30天', value: '30d' },
  { label: '90天', value: '90d' }
]

// 顶部指标数据
const topMetrics = reactive([
  {
    label: '总访问量',
    value: 234567,
    color: '#409eff',
    iconColor: '#fff',
    icon: 'TrendCharts',
    gradient: 'linear-gradient(135deg, #409eff, #66b1ff)',
    trend: { type: 'positive', value: '+15.2%' },
    progress: 78
  },
  {
    label: '活跃用户',
    value: 45892,
    color: '#67c23a',
    iconColor: '#fff',
    icon: 'DataAnalysis',
    gradient: 'linear-gradient(135deg, #67c23a, #85ce61)',
    trend: { type: 'positive', value: '+8.7%' },
    progress: 65
  },
  {
    label: '转化率',
    value: 12.34,
    color: '#e6a23c',
    iconColor: '#fff',
    icon: 'PieChartIcon',
    gradient: 'linear-gradient(135deg, #e6a23c, #f0c78a)',
    trend: { type: 'negative', value: '-2.1%' },
    progress: 55
  },
  {
    label: '平均停留',
    value: 356,
    color: '#f56c6c',
    iconColor: '#fff',
    icon: 'Timer',
    gradient: 'linear-gradient(135deg, #f56c6c, #f78989)',
    trend: { type: 'positive', value: '+5.8%' },
    progress: 82
  }
])

// 主图表数据
const chartDataSets = {
  '7d': {
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    visitors: [4200, 3800, 5100, 4600, 5800, 3200, 4100],
    users: [2800, 2400, 3600, 3100, 4200, 2100, 2900],
    conversions: [420, 380, 510, 460, 580, 320, 410],
    revenue: [8400, 7600, 10200, 9200, 11600, 6400, 8200]
  },
  '30d': {
    categories: ['第1周', '第2周', '第3周', '第4周'],
    visitors: [28000, 32000, 35000, 31000],
    users: [18000, 21000, 24000, 20000],
    conversions: [2800, 3200, 3500, 3100],
    revenue: [56000, 64000, 70000, 62000]
  },
  '90d': {
    categories: ['第1月', '第2月', '第3月'],
    visitors: [120000, 135000, 128000],
    users: [78000, 89000, 82000],
    conversions: [12000, 13500, 12800],
    revenue: [240000, 270000, 256000]
  }
}

// 主图表配置
const mainChartOption = computed(() => {
  const data = chartDataSets[selectedPeriod.value]
  
  return {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e4e7ed',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    legend: {
      data: ['访问量', '用户数', '转化数', '收益'],
      top: 10,
      textStyle: {
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.categories,
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        axisLabel: {
          color: '#666',
          formatter: function(value) {
            if (value >= 1000) {
              return (value / 1000).toFixed(0) + 'k'
            }
            return value
          }
        }
      },
      {
        type: 'value',
        name: '收益',
        position: 'right',
        axisLabel: {
          color: '#666',
          formatter: function(value) {
            if (value >= 1000) {
              return (value / 1000).toFixed(0) + 'k'
            }
            return value
          }
        }
      }
    ],
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: data.visitors,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: '#409eff' },
              { offset: 1, color: '#66b1ff' }
            ]
          }
        }
      },
      {
        name: '用户数',
        type: 'bar',
        data: data.users,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: '#67c23a' },
              { offset: 1, color: '#85ce61' }
            ]
          }
        }
      },
      {
        name: '转化数',
        type: 'line',
        data: data.conversions,
        smooth: true,
        lineStyle: {
          color: '#e6a23c',
          width: 3
        },
        itemStyle: {
          color: '#e6a23c'
        }
      },
      {
        name: '收益',
        type: 'line',
        yAxisIndex: 1,
        data: data.revenue,
        smooth: true,
        lineStyle: {
          color: '#f56c6c',
          width: 3
        },
        itemStyle: {
          color: '#f56c6c'
        }
      }
    ]
  }
})

// 饼图数据
const pieChartOption = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: {
      color: '#666'
    }
  },
  series: [
    {
      name: '数据来源',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 35, name: '直接访问', itemStyle: { color: '#409eff' } },
        { value: 28, name: '搜索引擎', itemStyle: { color: '#67c23a' } },
        { value: 22, name: '社交媒体', itemStyle: { color: '#e6a23c' } },
        { value: 15, name: '邮件营销', itemStyle: { color: '#f56c6c' } }
      ]
    }
  ]
}))

// 表格数据
const tableData = reactive([
  { date: '01-15', category: '访问', value: 4200, growth: 12.5 },
  { date: '01-16', category: '用户', value: 3800, growth: -5.2 },
  { date: '01-17', category: '访问', value: 5100, growth: 34.2 },
  { date: '01-18', category: '转化', value: 4600, growth: -9.8 },
  { date: '01-19', category: '访问', value: 5800, growth: 26.1 },
  { date: '01-20', category: '用户', value: 3200, growth: -44.8 },
  { date: '01-21', category: '访问', value: 4100, growth: 28.1 }
])

// 过滤后的表格数据
const filteredTableData = computed(() => {
  if (!searchText.value) return tableData
  return tableData.filter(item => 
    item.category.includes(searchText.value) || 
    item.date.includes(searchText.value)
  )
})

// 实时数据
const realtimeData = reactive([
  {
    name: 'CPU使用率',
    value: '45%',
    color: '#409eff',
    history: [20, 35, 45, 38, 42, 45, 40, 45]
  },
  {
    name: '内存使用',
    value: '68%',
    color: '#67c23a',
    history: [50, 55, 60, 65, 68, 65, 70, 68]
  },
  {
    name: '网络延迟',
    value: '23ms',
    color: '#e6a23c',
    history: [30, 25, 20, 23, 28, 23, 20, 23]
  }
])

// 系统状态
const systemStatus = reactive([
  { name: '数据库连接', value: 98 },
  { name: 'API响应', value: 95 },
  { name: '服务可用性', value: 99 },
  { name: '缓存命中率', value: 85 }
])

// 智能洞察
const insights = reactive([
  {
    id: 1,
    type: 'success',
    icon: 'TrophyBase',
    title: '表现优异',
    description: '本周访问量较上周增长15.2%，表现优异'
  },
  {
    id: 2,
    type: 'warning',
    icon: 'Warning',
    title: '需要关注',
    description: '转化率略有下降，建议优化用户体验'
  },
  {
    id: 3,
    type: 'info',
    icon: 'SuccessFilled',
    title: '系统稳定',
    description: '系统运行稳定，各项指标正常'
  }
])

// 方法
const handleMetricClick = (metric) => {
  ElMessage.info(`查看 ${metric.label} 详细数据`)
}

const changePeriod = (period) => {
  selectedPeriod.value = period
  ElMessage.success(`切换到 ${timePeriods.find(p => p.value === period)?.label} 视图`)
}

const handleExport = (command) => {
  ElMessage.success(`导出为 ${command.toUpperCase()} 格式`)
}

const handleChartClick = (params) => {
  ElMessage.info(`点击了 ${params.seriesName}: ${params.value}`)
}

const refreshPieData = () => {
  ElMessage.success('饼图数据已刷新')
}

const exportData = () => {
  ElMessage.success('数据导出成功')
}

const handleRowClick = (row) => {
  ElMessage.info(`查看 ${row.date} ${row.category} 详情`)
}

const handleInsightAction = (insight) => {
  ElMessage.info(`查看洞察详情: ${insight.title}`)
}

const getStatusColor = (value) => {
  if (value >= 95) return '#67c23a'
  if (value >= 80) return '#e6a23c'
  return '#f56c6c'
}

// 数字动画
const animateMetrics = () => {
  topMetrics.forEach((metric, index) => {
    let current = 0
    const target = metric.value
    const increment = target / 60
    const timer = setInterval(() => {
      current += increment
      if (current >= target) {
        animatedMetrics.value[index] = metric.label.includes('率') || metric.label.includes('停留') ? 
          target.toFixed(2) : target.toLocaleString()
        clearInterval(timer)
      } else {
        animatedMetrics.value[index] = metric.label.includes('率') || metric.label.includes('停留') ? 
          current.toFixed(2) : Math.floor(current).toLocaleString()
      }
    }, 16)
  })
}

// 生命周期
onMounted(() => {
  animateMetrics()
  
  // 模拟实时数据更新
  setInterval(() => {
    realtimeData.forEach(item => {
      item.history.shift()
      item.history.push(Math.floor(Math.random() * 100))
    })
  }, 3000)
})
</script>

<style scoped>
.analysis-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
  position: relative;
}

.analysis-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.analysis-page > * {
  position: relative;
  z-index: 1;
}

/* 顶部指标卡片 */
.top-metrics {
  margin-bottom: 24px;
}

.metric-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.metric-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.12),
    0 8px 20px rgba(0,0,0,0.08);
}

.metric-card:hover::after {
  opacity: 1;
}

.metric-content {
  display: flex;
  align-items: center;
  padding: 24px;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.metric-left {
  flex-shrink: 0;
}

.metric-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.metric-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: iconRotate 3s linear infinite;
}

@keyframes iconRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.metric-right {
  flex: 1;
  min-width: 0;
}

.metric-value {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  width: fit-content;
}

.metric-trend.positive {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.metric-trend.negative {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.trend-period {
  margin-left: 4px;
  opacity: 0.7;
}

.metric-progress {
  height: 4px;
  background: #f0f2f5;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 图表区域 */
.chart-section {
  margin-bottom: 24px;
}

.chart-card, .pie-chart-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.chart-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chart-subtitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.period-buttons .el-button {
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.main-chart-container {
  height: 400px;
  padding: 20px 0;
}

.main-chart {
  height: 100% !important;
  width: 100% !important;
}

.pie-chart-container {
  height: 300px;
  padding: 20px 0;
}

.pie-chart {
  height: 100% !important;
  width: 100% !important;
}

/* 详细数据区域 */
.detail-section {
  margin-bottom: 24px;
}

.table-card, .monitor-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.table-header, .monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title, .monitor-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.value-cell {
  font-weight: 600;
  color: #333;
}

.growth-cell {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.growth-cell.positive {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.growth-cell.negative {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

/* 实时监控 */
.monitor-content {
  padding: 10px 0;
}

.realtime-metrics {
  margin-bottom: 24px;
}

.realtime-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}

.realtime-item:last-child {
  border-bottom: none;
}

.realtime-label {
  flex: 1;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.realtime-value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-right: 16px;
  min-width: 60px;
  text-align: right;
}

.realtime-chart {
  width: 100px;
}

.mini-chart {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 30px;
}

.chart-bar {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  opacity: 0.8;
  animation: barGrow 0.6s ease-out;
}

@keyframes barGrow {
  from { height: 0; }
}

.system-status {
  margin-top: 20px;
}

.status-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.status-item {
  margin-bottom: 12px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.status-name {
  font-size: 12px;
  color: #666;
}

.status-value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.status-bar {
  height: 6px;
  background: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 智能洞察 */
.insights-section {
  margin-bottom: 24px;
}

.insights-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.insights-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.insights-content {
  padding: 10px 0;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  background: #f8f9fa;
  transition: all 0.3s ease;
  gap: 16px;
}

.insight-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.insight-item.success {
  border-left: 4px solid #67c23a;
}

.insight-item.warning {
  border-left: 4px solid #e6a23c;
}

.insight-item.info {
  border-left: 4px solid #409eff;
}

.insight-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  flex-shrink: 0;
}

.insight-content-text {
  flex: 1;
}

.insight-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.insight-description {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.insight-action {
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .analysis-page {
    padding: 16px;
  }
  
  .metric-content {
    padding: 20px;
  }
  
  .chart-section .el-col:first-child {
    margin-bottom: 20px;
  }
  
  .detail-section .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .analysis-page {
    padding: 12px;
  }
  
  .metric-content {
    padding: 16px;
    gap: 12px;
  }
  
  .metric-icon {
    width: 48px;
    height: 48px;
  }
  
  .metric-value {
    font-size: 20px;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .table-header, .monitor-header, .insights-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .table-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* 滚动条样式 */
.table-container::-webkit-scrollbar {
  width: 4px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
